
<template>
  <div class="container">
    <div class="login_box">
      <h2>电商后台管理平台</h2>
      <el-form :model="loginDataObj" :rules="loginFormRules" ref="loginFormRef">
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginDataObj.username">
            <template #prefix>
              <el-icon>
                <SvgIcon name="user"></SvgIcon>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input type="password" v-model="loginDataObj.password" show-password>
            <template #prefix>
              <el-icon>
                <SvgIcon name="password"></SvgIcon>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 登录或重置 -->
        <el-form-item class="login_btns">
          <el-button type="primary" @click="goLogin">登录</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { goLoginApi } from '@/http/api'
import type { FormInstance, FormRules } from 'element-plus'


const loginDataObj = reactive({
  username: '',
  password: ''
})

//重置表单
const resetForm = () => {
  loginFormRef.value?.resetFields()
}

//表单ref
const loginFormRef = ref<FormInstance>()

//定义检验规则
const loginFormRules = reactive<FormRules>({
  //用户名校验
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 5, max: 20, message: '用户名长度要在5~20个字符之间', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 5, max: 20, message: '密码长度要在5~20个字符之间', trigger: 'blur' },
  ]
})

const goLogin = () => {

  loginFormRef.value?.validate(async valid => {
    console.log('valid:', valid)
    //如果表单输入不合法，直接返回
    if (!valid) return

    //如果合法，就调用登录接口

    const res = await goLoginApi(loginDataObj)
    console.log('页面上拿到登录数据：', res)


  })

}




</script>

<style scoped lang="scss">
@import "@/style/mixin.scss";

.container {
  background: #2b4b6b;
  width: 100%;
  height: 100%;
  position: relative;

  .login_box {
    box-sizing: border-box;
    border-radius: 10px;
    padding: 0 30px;
    box-shadow: 0px 0px 10px #fff;
    width: 45%;
    min-width: 450px;
    height: 300px;
    background: #fff;
    @include v_h_center(0px);
    // @extend .v_h_center;

    h2 {
      text-align: center;
    }
  }
}

:deep(.el-form-item__content) {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
</style>